<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>三角形小标</title>
        <link href="a0.png" rel="shortcut icon"/>
        <link href="css/demo.css" type="text/css" />
        <style type="text/css">
            .aa{
                position: relative;
                background-color: pink;
            }
            a.bb:after{
                content:"";
                display:block;
                width: 0.1px;
                height: 0.1px;
                border:5px #000000 solid;
                border-right-color: transparent;
                border-top-color: transparent;
                border-left-color: transparent;
                position: absolute;
                top: 50% ; 
                left: 100%;
                margin-left: 5px;
                margin-top: -2.5px;
            }
            a.bb:hover:after {
                 content:"";
                display:block;
                width: 0.1px;
                height: 0.1px;
                border:5px #000000 solid;
                border-left-color: transparent;
                border-right-color: transparent;
                border-bottom: none;
                position: absolute;
                top: 50% ; 
                left: 100%;
                margin-left: 5px;
                margin-top: -2.5px;}
            /*响应式导航*/
            .nav { 
                position: relative; 
                margin: 20px 0; 
            } 
            .nav ul { 
                margin: 0; 
                padding: 0; 
            } 
            .nav li { 
                margin: 0 5px 10px 0; 
                padding: 0; 
                list-style: none; 
                display: inline-block; 
            } 
            .nav a { 
                padding: 3px 12px; 
                text-decoration: none; 
                color: #999; 
                line-height: 100%; 
            } 
            .nav a:hover { 
                color: #d0d0d0; 
            } 
            .nav .current a { 
                background: #999; 
                color: #fff; 
                border-radius: 5px; 
            } 
                            /* right nav */ 
            .nav.right ul { 
                text-align: right; 
            } 

            /* center nav */ 
            .nav.center ul { 
                text-align: center; 
            }   
                
            @media screen and (max-width: 600px) { 
            .nav { 
                position: relative; 
                min-height: 40px; 
            }     
            .nav ul { 
                width: 180px; 
                padding: 5px 0; 
                position: absolute; 
                top: 0; 
                left: 0; 
                border: solid 1px #aaa; 
                background: #fff url(images/menu.png) no-repeat 10px 11px; 
                border-radius: 5px; 
                box-shadow: 0 1px 2px rgba(0,0,0,.3); 
            } 
            .nav li { 
                display: none; /* hide all  items */ 
                margin: 0; 
            } 
            .nav .current { 
                display: block; /* show only current 
         item */ 
            } 
            .nav a { 
                display: block; 
                padding: 5px 5px 5px 32px; 
                text-align: left; 
            } 
            .nav .current a { 
                background: none; 
                color: #666; 
            } 

            /* on nav hover */ 
            .nav ul:hover { 
                background-image: none; 
            } 
            .nav ul:hover li { 
                display: block; 
                margin: 0 0 5px; 
            } 
            .nav ul:hover .current { 
                background: url(images/check.png) no-repeat 10px 7px; 
            } 

            /* right nav */ 
            .nav.right ul { 
                left: auto; 
                right: 0; 
            } 

            /* center nav */ 
            .nav.center ul { 
                left: 50%; 
                margin-left: -90px; 
            } 
        } 
        </style>
    </head>
    <body>
       <span class="aa">百bgfhythjty度<a class=" bb"></a></span>
        <div>hyuh67u67u</div>
            <div class="nav">
            <ul>
                <li class="current"><a href="#"  rel="nofollow">首页</a></li>
                <li><a href="#" rel="nofollow" >客户服务</a></li>
                <li><a href="#" rel="nofollow" >产品展示</a></li>
                <li><a href="#" rel="nofollow" >经典案例</a></li>
                <li><a href="#" rel="nofollow" >联系我们</a></li>
            </ul>
        </div>
    </body>
</html>